<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" top="30vh" @close.native="cancel" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="流程图名称：" prop="name">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="流程图分类：" prop="directoryId">
          <el-cascader style="width:100%" v-model="form.directoryId" :options="optionsArr" :props="{ value:'id'}"></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAll } from "@/api/directory"
import { add } from "@/api/file"
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        directoryId: '',
        name: '',
      },
      rules: {
        name: [
          { required: true, message: "请填写", trigger: "blur" }
        ],
        directoryId: [
          { required: true, message: "请选择", trigger: "blur" }
        ],
      },
      title: '',
      optionsArr: [],
    }
  },
  methods: {
    show(obj) {
      this.dialogVisible = true
      this.title = obj.title;
      if (obj.data) {
        this.form = Object.assign(this.form, obj.data)
      }
      this.initData()
    },
    initData() {
      getAll({}).then((res) => {
        this.optionsArr = res.data || []
        console.log('%c [  ]-97', 'font-size:13px; background:pink; color:#bf2c9f;', this.optionsArr)
      })
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          console.log('%c [  ]-61', 'font-size:13px; background:pink; color:#bf2c9f;', this.form)
          add({
            name: this.form.name,
            directoryId: this.form.directoryId[this.form.directoryId.length - 1]
          }).then((res) => {
            this.$router.push({
              name: 'ProcessonEdit',
              query: {
                id: res.data
              }
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.$emit('close')
    },
    handleChange(file) {
      const _file = file?.raw ?? file
      const formData = new FormData()
      formData.append('file', _file)
      formData.append('pathType', file.name.split('.').pop())
      uploadFile(formData).then(res => {
        this.form.fileName = res.data.fileName
        this.form.fileOriginPath = res.data.filePath
        this.form.filePath = res.data.servicePath
      })
    },
    // 多次上传覆盖
    handleExceed(file) {
      this.$refs.uploadRef.clearFiles()
      this.handleChange(file[0])
    },
    closeFile() {
      if (this.form.fileOriginPath) {
        deleteFile({ files: [this.form.fileOriginPath] }).then(() => {
          this.form.fileName = ''
          this.form.fileOriginPath = ''
          this.form.filePath = ''
        })
      } else {
        this.form.fileName = ''
        this.form.fileOriginPath = ''
        this.form.filePath = ''
      }
    },

    lookLinkDialog(item) {
      if (item.filePath) {
        this.$message.success('正在下载文件，请稍后...')
        fetch(item.filePath).then(res => {
          res.blob().then(blob => {
            const blobUrl = window.URL.createObjectURL(blob)
            const a = document.createElement('a')
            a.style.display = 'none'
            a.href = blobUrl
            a.download = item.fileName
            document.body.appendChild(a)
            a.click()
            document.body.removeChild(a)
            window.URL.revokeObjectURL(blobUrl)
          })
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  // :deep(.el-cascader-menu__wrap) {
  //   height: 240px !important;
  // }
</style>